<template>
    <div>
        <el-row>
            <el-col :span="6" class="col-one">
                <dl class="dl">
                    <dt>
                        <span>全部分类</span>
                        <span class="iconfont">&#xe63d;</span>
                    </dt>
                    <dd>
                        <span>酒店</span>
                        <span>上海/北京/广州</span>
                    </dd>
                    <dd>
                        <span>旅游</span>
                        <span>目的地攻略/行程计划</span>
                    </dd>
                    <dd>
                        <span>电影</span>
                        <span>看影片/找影院</span>
                    </dd>
                    <dd>
                        <span>休闲娱乐</span>
                        <span>游乐园/水上乐园</span>
                    </dd>
                    <dd>
                        <span>结婚</span>
                        <span>婚纱服务/婚庆服务</span>
                    </dd>
                    <dd>
                        <span>生活服务</span>
                        <span>配镜/婚纱摄影</span>
                    </dd>
                    <dd>
                        <span>美食</span>
                        <span>小吃快餐/自助餐</span>
                    </dd>
                    <dd>
                        <span>丽人</span>
                        <span>美发/美甲</span>
                    </dd>
                </dl>
            </el-col>
            <el-col :span="12">
                <div class="item">
                    <span>首页</span>
                    <span>酒店</span>
                    <span>出行</span>
                    <span>电影</span>
                    <span>结婚</span>
                    <span>外卖</span>
                </div>
                <div class="img">
                    <img src="//gss0.bdstatic.com/8r1VfDn9KggZnd_b8IqT0jB-xx1xbK/static/list/img/revision/banner_21ada6c.jpg" >
                </div>
            </el-col>
            <el-col :span="6">
                <img src="//gss0.bdstatic.com/8r1VfDn7KggZnd_b8IqT0jB-xx1xbK/static/list/img/revision/right-banner_562f509.jpg">
                <a href="//d.nuomi.com/?1009764s" target="_blank" mon="element=https://d.nuomi.com/?1009764s" class="qrcode-discount" style="visibility: visible;">下载手机版</a>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'HomeItem'
}
</script>

<style lang="stylus" scoped>
// @import "./media.css"
    dl
        width: 14.56rem;
        height: 26.125rem;
        margin-left: 9.125rem;
    dl {
        dd:hover {
            background: #ededed;
            span {
                color: #aaa;
            }
        }
    } 
        dt
            background-image: linear-gradient(-180deg,#d6ad62 0,#bf974d 100%);
            height: 2.75rem;
            color: #fff;
            display: flex;
            justify-content: space-between
            padding: 0 0.625rem 0 0.625rem;
            span
                margin-top: 11px;
                font-size: 17px;
        dd
            background-color: #313131;
            width: 13.31rem;
            height: 3.06rem;
            margin-left: 0;
            display: flex;
            cursor: pointer;
            justify-content: space-between;
            padding: 0 .625rem 0 .625rem;
            span 
                margin-top: .8125rem;
            span:nth-child(1)
                font-size: .875rem;
                color: #fff;
            span:nth-child(2)
                font-size: .75rem;
                color: #aaa;
    .item
        width: 60.94rem;
        height: 2.75rem;
        border-bottom: .125rem solid #B08C4A;
        margin-top: .94rem;
        span
            wdith: 5.75rem;
            height: 2.75rem;
            line-height: 2.75rem;
            padding: .3125rem;
            margin-right: 3.75rem;
        span:nth-child(1)
            margin-left: 2.5rem;
        span:hover
            color: #B08C4A;
            cursor: pointer;
    .img
        margin-left: 1.5rem;
        width: 43.5rem;
        height: 23.25rem;
        img
            height: 100%;
            width: 100%;
            margin-top: 1.125rem;
            margin-left: .625rem;
    img
        width: 14.75rem;
        height: 10.25rem;
        margin-top: 4.9rem;
        margin-left: 2rem;
    a
        display: block;
        width: 14.75rem;
        height: 12.25rem;
        text-indent: -9999px;
        overflow: hidden;
        text-align: left;
        background-image: url(//gss0.bdstatic.com/8r1VfDn9KggZnd_b8IqT0jB-xx1xbK/static/list/img/revision/right-erweima_9924e71.png);
        background-image: -webkit-image-set(url(//gss0.bdstatic.com/8r1VfDn9KggZnd_b8IqT0jB-xx1xbK/static/list/img/revision/right-erweima_9924e71.png) 1x,url(//gss0.bdstatic.com/8r1VfDn9KggZnd_b8IqT0jB-xx1xbK/static/list/img/revision/right-erweima_9924e71.png) 2x);
        background-repeat: no-repeat;
        background-size: 100%;
        visibility: hidden;
        margin-left: 2rem;
        margin-top: .469rem ;
            
</style>


